import React from 'react'
import {connect} from 'react-redux'
import {Redirect,Route, Switch} from 'react-router-dom'
import { Layout, Button} from 'antd';



import {closeTitle} from '../../redux/actions'
import Header from '../../compnents/header/header'
import Leftnav from '../../compnents/leftnav/leftnav'
import './admin.less'

import Home from '../home/home'
import Category from '../products/category/category'
import Product from '../products/product/product'
import Role from '../role/role'
import User from '../user/user'
import Bar from '../charts/bar/bar'
import Line from '../charts/line/line'
import Pie from '../charts/pie/pie'

import { Tabs } from 'antd';


const { TabPane } = Tabs;

const {  Footer, Sider, Content } = Layout;


const initialPanes = [
    { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
    { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
    {
      title: 'Tab 3',
      content: 'Content of Tab 3',
      key: '3',
      closable: false,
    },
  ];

class Admin extends React.Component{
   /********************************************** */
   newTabIndex = 0;

   state = {
     activeKey: initialPanes[0].key,
     panes: initialPanes,
   };
 
   onChange = activeKey => {
     this.setState({ activeKey });
   };
 
   onEdit = (targetKey, action) => {
     this[action](targetKey);
   };
 
   add = () => {
     const { panes } = this.state;
     const activeKey = `newTab${this.newTabIndex++}`;
     const newPanes = [...panes];
     newPanes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
     this.setState({
       panes: newPanes,
       activeKey,
     });
   };
 
   remove = targetKey => {
     const { panes, activeKey } = this.state;
     let newActiveKey = activeKey;
     let lastIndex;
     panes.forEach((pane, i) => {
       if (pane.key === targetKey) {
         lastIndex = i - 1;
       }
     });
     const newPanes = panes.filter(pane => pane.key !== targetKey);
     if (newPanes.length && newActiveKey === targetKey) {
       if (lastIndex >= 0) {
         newActiveKey = newPanes[lastIndex].key;
       } else {
         newActiveKey = newPanes[0].key;
       }
     }
     this.setState({
       panes: newPanes,
       activeKey: newActiveKey,
     });
   };
 
   componentWillMount(){
       this.setState({
           panes:this.props.headTitleArreys
       })
   }
   /******************************************** */
    render(){ 
        const { panes, activeKey } = this.state;
       
         const user = this.props.user
           // 如果内存没有存储user ==> 当前没有登陆
         if(!user ||!user._id){
              // 自动跳转到登陆(在render()中)
            return <Redirect to='/login'/>
         }

       



        return (
            <Layout style={{height:'100%'}}>
                <Sider> 
                    <div className='logo'>XXX测试系统</div>
                    {/* <Leftnav getname={this}></Leftnav>getname={this}是用来配合子传父使用的 */}
                    {/* <Leftnav gettest={this.test1}></Leftnav> */}
                    <Leftnav></Leftnav>
                </Sider>
                <Layout>
                    <Header>Header</Header>
                    <Content style={{backgroundColor: 'white'}}>
                    {/* <Button onClick={this.add}>ADD</Button> */}
                    <Tabs
                    type="editable-card"
                    onChange={this.onChange}
                    activeKey={activeKey}
                    onEdit={this.onEdit}
                >
                    {panes.map(pane => (
                    <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
                        {pane.content}
                    </TabPane>
                    ))}
                </Tabs>
                   
                        <Switch>
                            <Route path='/home' component={Home}/>
                            <Route path='/category' component={Category}/>
                            <Route path='/product' component={Product}/>
                            <Route path='/role' component={Role}/>
                            <Route path='/user' component={User}/>
                            <Route path='/charts/bar' component={Bar}/>
                            <Route path='/charts/line' component={Line}/>
                            <Route path='/charts/pie' component={Pie}/>
                            <Redirect to='/home' />
                        </Switch>
                    </Content>
                    <Footer style={{textAlign: 'center', color: '#aaaaaa'}}>推荐使用谷歌浏览器，可以获得更佳页面操作体验</Footer>      
                </Layout>    
          </Layout>
        )
    }
}


export default connect(
    state =>({
        user:state.user,
        headTitle:state.headTitle,
        headTitleArreys:state.headTitleArreys
    }),
    {
        closeTitle
    }
)(Admin);
